<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的银行卡</title>
    <link rel="stylesheet" href="css/bankcardlist-style.css">
    <link rel="stylesheet" href="css/nav2.css">
	<script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>
</head>
<body>
<div class="view">
    <!--顶部导航栏-->
    <nav>
        <div class="menubar">
            <a href="index.html" class="home"><img src="images/logo.png" width="200" height="70"></a>
            <div class="icons">
                <div class="secondary-icons">
                    <i class="icon-second"><a href="personalcenter.html"><img
                            src="images/svg/icon-171.svg"></a></i>
                    <i class="icon-second"><a href="helpandsupport.html"><img
                            src="images/svg/icon-198.svg"></a></i>
                </div>

                <i class="icon-menu"><span></span></i>
            </div>
        </div>
        <ul class="menu">
            <li class="menu-link">
                <a href="index.html.html" class="text-item">首 页</a>
            </li>
            <li class="menu-link sub">
                <a href="capitalcenter.html" target="_blank" class="text-item">资金来往<span class="icon"></span></a>
            </li>
            <li class="menu-link sub">
                <a href="personalcenter.html" target="_blank" class="text-item">个人中心<span class="icon"></span></a>
            </li>
            <li class="menu-link">
                <a href="helpandsupport.html" target="_blank" class="text-item">帮助与服务</a>
            </li>
        </ul>
    </nav>
    <!--银行卡列表-->
    <ul class="card__list" id="bankCardList">
        <!--        <li class="card__item card__item&#45;&#45;tan" onclick="window.open('bankcard.html');">-->
        <!--            <div class="card__info">-->
        <!--                <div class="info-player">-->
        <!--                    <p class="info-player__num">1</p>-->
        <!--                    <p class="info-player__name"><small>TOTORO BANK</small><br>储蓄卡</p>-->
        <!--                </div>-->
        <!--                <div class="info-place"><small>0000 **** **** 0000</small></div>-->
        <!--            </div>-->
        <!--        </li>-->
        <!--        <li class="card__item card__item&#45;&#45;tan" onclick="window.open('bankcard.html');">-->
        <!--            <div class="card__info">-->
        <!--                <div class="info-player">-->
        <!--                    <p class="info-player__num">2</p>-->
        <!--                    <p class="info-player__name"><small>TOTORO BANK</small><br>储蓄卡</p>-->
        <!--                </div>-->
       <!--                <div class="info-place"><small>0000 **** **** 0000</small></div> -->
        <!--            </div>-->
        <!--        </li>-->
        <!--        <li class="card__item card__item&#45;&#45;tan" onclick="window.open('bankcard.html');">-->
        <!--            <div class="card__info">-->
        <!--                <div class="info-player">-->
        <!--                    <p class="info-player__num">3</p>-->
        <!--                    <p class="info-player__name"><small>TOTORO BANK</small><br>储蓄卡</p>-->
        <!--                </div>-->
        <!--                <div class="info-place"><small>0000 **** **** 0000</small></div>-->
        <!--            </div>-->
        <!--        </li>-->
        <!--        <li class="card__item card__item&#45;&#45;tan" onclick="window.open('bankcard.html');">-->
        <!--            <div class="card__info">-->
        <!--                <div class="info-player">-->
        <!--                    <p class="info-player__num">4</p>-->
        <!--                    <p class="info-player__name"><small>TOTORO BANK</small><br>储蓄卡</p>-->
        <!--                </div>-->
        <!--                <div class="info-place"><small>0000 **** **** 0000</small></div>-->
        <!--            </div>-->
        <!--        </li>-->
        <!--        <li class="card__item card__item&#45;&#45;tan" onclick="window.open('bankcard.html');">-->
        <!--            <div class="card__info">-->
        <!--                <div class="info-player">-->
        <!--                    <p class="info-player__num">5</p>-->
        <!--                    <p class="info-player__name"><small>TOTORO BANK</small><br>储蓄卡</p>-->
        <!--                </div>-->
        <!--                <div class="info-place"><small>0000 **** **** 0000</small></div>-->
        <!--            </div>-->
        <!--        </li>-->
        <!--        <li class="card__item card__item&#45;&#45;tan" onclick="window.open('bankcard.html');">-->
        <!--            <div class="card__info">-->
        <!--                <div class="info-player">-->
        <!--                    <p class="info-player__num">6</p>-->
        <!--                    <p class="info-player__name"><small>TOTORO BANK</small><br>贷记卡</p>-->
        <!--                </div>-->
        <!--                <div class="info-place"><small>0000 **** **** 0000</small></div>-->
        <!--            </div>-->
        <!--        </li>-->
        <!--        <li class="card__item card__item&#45;&#45;tan" onclick="window.open('bankcard.html');">-->
        <!--            <div class="card__info">-->
        <!--                <div class="info-player">-->
        <!--                    <p class="info-player__num">7</p>-->
        <!--                    <p class="info-player__name"><small>TOTORO BANK</small><br>贷记卡</p>-->
        <!--                </div>-->
        <!--                <div class="info-place"><small>0000 **** **** 0000</small></div>-->
        <!--            </div>-->
        <!--        </li>-->
    </ul>
    <!--底部-->
    <footer>
        <ul>
            <li>
                <p class="home">About</p>
                <a class="logo" href="index.html" target="_blank">TOTORO BANK<i>&copy; 2020</i></a>
            </li>
            <li>
                <p class="services">服 务</p>
                <ul>
                    <li><a href="#">信用卡服务</a></li>
                    <li><a href="helpandsupport.html" target="_blank">帮助与支持</a></li>
                    <li><a href="personalcenter.html" target="_blank">我的服务</a></li>
                </ul>
            </li>
            <li>
                <p class="reachus">关于我们</p>
                <ul>
                    <li>E-mail : edu@neusoft.com</li>
                    <li>Tel : +86-28-64888000</li>
                    <li>Address : 成都市都江堰市青城山区</li>
                </ul>
            </li>
            <li>
                <p class="clients">快捷操作</p>
                <ul>
                    <li><a href="index.html">返回首页 > </a></li>
                </ul>
            </li>
        </ul>
    </footer>
</div>
</section>
<script src="js/nav2.js"></script>
<script src="js/jquery.js"></script>
<script type="text/javascript">
    function jumpToBankCard(cardnum,cardid) {
		localStorage.setItem("cardid",cardid);
        window.open('bankcard.html?cardmum=' + cardnum)
    }
    $.ajax({
        url: "http://www.longm.top:8080/lm/Card/QueryUserCard",
        type: "POST",
        dataType: "json",
        headers: {
            'Content-Type': 'application/json',
            "token": window.localStorage.getItem("token")
        },
        cache: false,
        async: true,
        contentType: "application/x-www-form-urlencoded",
        data: {},
        success: function (res) {
            console.log(JSON.stringify(res));
            if (res.code === 200) {
                var result = res.data
                for (var i = 0; i < result.length; i++) {
                    $('#bankCardList').append("<li class='card__item card__item--tan' onclick='jumpToBankCard("+'"'+ res.data[i].cardnum +'"'+','+'"'+res.data[i].cardid+'"'+")'>" +
                        "<div class='card__info'>" +
                        "<div class='info-player'>" +
                        "<p class='info-player__num'>" + (i + 1) + "</p>" +
                        "<p class='info-player__name'>" + "<small>" + 'TOTORO BANK' + "</small><br>" + '储蓄卡' + "</p>" +
                        "</div>" +
                        "<div class='info-place'>" + "<small>" + res.data[i].cardnum + "</small>" + "</div>" +
                        "</div>" +
                        "</li>")
                }
            }
        }
    });
</script>
</body>
</html>